{% extends 'base.html' %}

{% block title %}
商品首页
{%endblock%}

{% block headerjs %}
<style>
    .redA{
        color: red;
        font-size: 20px;
    }
</style>
{%endblock%}

{% block main %}

<div class="classes">
    <ul class="classes-items">

    {% for category in category_list %}            
        <li class="items {% if category.id == current_category %} active {% endif %} "><a href="http://127.0.0.1:8000/category/{{category.id}}/">{{category.cname}}</a></li>
    {% endfor %}

    </ul>
</div>

<div class="goods-model">
    <div class="goods-content">
    {% for goods in goods_list %}

        <div class="good">
            <a href="http://127.0.0.1:8000/goodsdetails/{{ goods.id }}">
                <img src="{{ goods.getImgUrl }}" width="285px" height="285px">
                <p class="name">{{goods.gname}}</p>
                <div class="price">
                    <i>￥</i>
                    <p class="big">{{goods.price}}</p>
                    <s>￥{{goods.oldprice}}</s>
                </div>
                <div class="sale">
                    特卖
                </div>
            </a>
        </div>

    {% endfor %}
    </div>
</div>

<div id="pager" style="text-align: center; font-size: 16px; overflow: hidden; margin-top: 10px;">


    {% if goods_list.has_previous %}
    <a href="http://127.0.0.1:8000/category/{{current_category}}/page/{{goods_list.previous_page_number}}/" style="display: inline-block; padding: 5px; margin: 5px;">上一页</a>
    {% endif %}

    {% for page in page_list %}
    <a href="http://127.0.0.1:8000/category/{{ current_category }}/page/{{ page }}/" {% if page == goods_list.number %}class="redA"{% endif %} style="display: inline-block; padding: 5px; margin: 5px;">{{ page }}</a>
    {% endfor %}
    
    {% if goods_list.has_next %}
    <a href="http://127.0.0.1:8000/category/{{current_category}}/page/{{goods_list.next_page_number}}/" style="display: inline-block; padding: 5px; margin: 5px;">下一页</a>
    {% endif %}
    
</div>


{%endblock%}

{%block footerjs%}
    <script>
        $('#pager').css({'text-align':'center','font-size':'16px','overflow':'hidden','margin-top':'10px'})
        $('#pager a').css({'display':'inline-block','padding':'5px','margin':'5px'})

    </script>
{%endblock%}